<template>
	<view>
		<view v-if="loading" @click="reload()" class="gui-padding gui-margin-top gui-text-center gui-color-gray"
			style="margin-top: 50rpx;">
			<view>{{text}}</view>

		</view>
		<!-- 卡包 -->
		<view style="margin: 20rpx 25rpx; margin-bottom: 190rpx;">

			<view v-if="!loading && cards.length > 0" class='card' v-for="(item,index) in cards" :key="index"
				@tap="card_click(item.wallet_type.id, item.id, item.type, item.money, item.expiry_time, item.type)"
				:style="{background: get_back(index,item),backgroundSize: '100% 100%'}" style="border-radius: 15rpx;">

				<view class="">
					<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap" style="padding-top: 20rpx;">
						<view class="gui-card-desc">
							<view
								style="color: white; height: 125rpx; margin-left: -25rpx; text-align: center; margin-top: 35rpx;"
								v-if="item.sub_head != null">
								<view style="font-size: 38rpx;">{{item.type == '女职工保健卡' ? '女职工中医卡' : item.type}}</view>
								<br>
								<view style="font-size: 30rpx; margin-top: -20rpx;">·{{item.sub_head}}</view>
							</view>
							<view style="color: white; height: 100rpx; margin-left: -25rpx; margin-top: 60rpx;" v-else>
								<view class="gui-h2"
									style="text-align: center; color: white;height: 160rpx; font-size: 38rpx;">
									{{item.type == '女职工保健卡' ? '女职工中医卡' : item.type}}
								</view>
							</view>
							<!-- <view style="margin-top: 10rpx;">
								<text class="gui-h5 " style="margin-top: 20rpx;">
									有效期至：{{item.wallet_type.expiry_time!=null?item.wallet_type.expiry_time.split(' ')[0]:'长期'}}
								</text>
							</view> -->
						</view>
					</view>
					<view class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center"
						style='padding-bottom: 20rpx;'>
						<!-- v-if="item.money != '0.00'" -->
						<!--  @tap="qianming" -->
						<text
							class="gui-icons gui-card-footer-item gui-border-r gui-color-white">余额:{{item.money}}</text>
						<text class="gui-icons gui-card-footer-item gui-border-r gui-color-white"
							@tap.stop="card_info(item.wallet_type.info_img_two, item.wallet_type.id, item.id, item.type, item.money)">详情</text>
						<text v-if="item.id != 0" class="gui-icons gui-card-footer-item gui-color-white"
							@tap.stop="to_record(item.id)">消费记录</text>
					</view>
				</view>

			</view>

		</view>

		<!-- 积分商品 -->
		<!-- <view class="gui-padding" v-if="card_cut==2 ">
			<view :class="'gui-card-view gui-margin-top gui-box-shadow gui-border-radius gui-padding gui-bg-white'"
				v-for="(item,index) in jf_shop" :key="index">
				<view class="gui-card-body gui-flex gui-rows gui-nowrap" style="padding-top: 20rpx;">
					<image :src="item.coupon.img" class="gui-card-img"
						style="position: relative;top:10rpx;width: 160rpx;height:160rpx;"></image>
					<view class="gui-card-desc ">
						<view class="" style="">
							<view class="gui-h4 gui-text-left" style="color:#666666;height: 80rpx;">
								{{item.coupon.name}}
							</view>
							<view class="gui-flex gui-space-between gui-color-red gui-h4" style="line-height: 40rpx;">
								<view>
									积分：{{item.coupon.price}}
								</view>
								<view>
									数量：{{item.num}}
								</view>
							</view>
							<view class="gui-flex gui-space-between">
								<view>
									<view>
										下单时间：{{item.created_at.split(' ')[0]}}
									</view>
									<view>
										结束时间：{{item.out_time.split(' ')[0]}}
									</view>
								</view>
								<view>
									<view v-if="item.status==0" class="gui-text-right "
										@tap="get_coupon_code(item.coupon.id,item.coupon.code,item.id,item.coupon.star_time,item.coupon.end_time)">
										<button size="mini" type="primary">二维码</button>

									</view>
									<view v-else>
										已使用
									</view>
								</view>
							</view>
						</view>
						<view style="margin-top: 10rpx;">
						</view>
					</view>
				</view>
			</view>
		</view> -->


		<!-- 弹出二维码 -->
		<!-- 居中弹出 -->
		<!-- <gui-popup ref="guipopup1">
			<view class="gui-relative gui-box-shadow gui-img-in">
				<view
					class="gui-margin-top-large gui-flex gui-rows gui-justify-content-center gui-box-shadow gui-bg-white gui-border-radius">
					<view class="gui-border gui-border-radius gui-justify-content-center gui-flex"
						style="height: 450rpx;width:450rpx;align-items: center;background-color: #fff;">
						<view class="" v-for="(item,index) in products2">
							<view class="">{{item.name}}</view>
						</view>
						<canvas v-if="ewm_text != ''" canvas-id="canvas" id="canvas" style="width:360rpx; height:360rpx;"
							@longpress="saveQrcode"></canvas>
					</view>
				</view>
				关闭按钮
		<text class="gui-block-text demo-close gui-icons gui-color-white gui-absolute-rt"
			@tap.stop="close1">&#xe78a;</text>
	</view>
	</gui-popup> -->

		<gui-popup ref="guipopup1" :canCloseByShade="false">
			<view style="width: 90%; height: 550rpx; background-color: white; margin: 0 auto; border-radius: 15rpx;">
				<view style="height: 40rpx;"></view>
				<canvas v-if="ewm_text != ''" canvas-id="canvas" id="canvas"
					style="width:360rpx; height:360rpx; margin: 0 auto;" @longpress="saveQrcode"></canvas>
				<view style="text-align: center; font-size: 30rpx; font-weight: bold; margin-top: 25rpx;">
					{{commodityName}}
				</view>
				<button type="default" @click="close1">关闭</button>
			</view>
		</gui-popup>

		<!-- 为空展示 -->
		<gui-empty v-if="isEmpty">

			<template v-slot:img>
				<view style="margin-top:50%;"></view>
				<view class="gui-flex gui-rows gui-justify-content-center">
					<text class="gui-icons gui-empty-icon gui-color-gray">&#xe644;</text>
				</view>
			</template>
			<template v-slot:text>
				<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">无数据</text>
			</template>
		</gui-empty>
		
		<menuBar menu_index="0"/>
	</view>
</template>

<script>
	import QRCode from '@/Grace6/js/qrcode.js';
	import menuBar from './menu_bar.vue';
	export default {
		components:{
			menuBar
		},
		data() {
			return {
				text: '加载中。。。',
				loading: false,
				this_index: 0,
				cards: [],
				jf_shop: [],
				products2: [],
				user: [],
				// card_type: '0',
				activeIndex: -1,
				qrcode: null,
				// 二维码尺寸，单位 rpx
				qrcodeSize: 360,
				// 二维码数据
				qrcodeContent: 'https://',
				// 二维码背景颜色
				qrcodeBgColor: '#FFFFFF',
				// 二维码颜色
				qrcodeColor: '#008AFF',
				// 画布 id
				qrcodeId: 'canvas',
				ewm_text: '',
				login_type: '',
				isEmpty: false,
				card_cut: 0,
				options: [{
						id: 0,
						name: '已使用'
					},
					{
						id: 1,
						name: "已过期"
					}
				],
				sign: null,
				mayDayway: null,
				mayDayscheme: null,
				commodityName: null,
			}
		},
		onLoad() {			
			this.user = uni.getStorageSync('member');
			this.get_all_card();
		},
		methods: {
			reload() {
				this.get_all_card();
			},
			// 获取用户中秋国庆物供选择方案
			// select_mayDay() {
			// 	let self = this
			// 	self.$boya.Request({
			// 		url: '/api/get_member_data',
			// 		data: {
			// 			type: 'zqgq_2024',
			// 			user: {
			// 				id: self.user.id
			// 			}
			// 		}
			// 	}, function(res) {
			// 		if (res.code == 200) {
			// 			console.log('res成功：', res.data);
			// 			self.mayDayway = res.data.data1
			// 			self.mayDayscheme = res.data.data2
			// 		} else {
			// 			self.mayDayway = null
			// 			self.mayDayscheme = null
			// 		}
			// 	}, false)
			// },
			// 获取用户是否签名
			signature() {
				let self = this
				this.sign = uni.getStorageSync("member_sign");
				if (this.sign == null) {
					this.$boya.NPost("/app/user_vip/user_sign", {

					}, function(res) {
						console.log('正确，有签名: ', res);
						self.sign = res.data.sign
						uni.setStorageSync("member_sign", res.data.sign);
					}, function(err) {
						console.log('错误，无签名: ', err);
						self.sign = null
					}, {
						showError: false
					})
				}
			},
			// selected(item) {
			// 	this.this_index = item.id;
			// this.action_type = item.name
			// console.log('传入数据: ', this.action_type);
			// this.get_coupon_log()
			// },
			// 卡包跳转详情页
			card_info(info_img_two, wallet_type_id, card_id, type, money) {
				let self = this
				console.log('info_img_two: ', info_img_two);
				if (info_img_two != null) {
					uni.navigateTo({
						url: '/pages/card/card_info?info_img_two=' + info_img_two
					})
				} else {
					self.card_click(wallet_type_id, card_id, type, money)
				}
			},
			// 卡包消费记录
			to_record(card_id) {
				uni.navigateTo({
					url: "./my_record?card_id=" + card_id,
				});
			},
			// 弹出二维码
			open1: function() {
				this.$refs.guipopup1.open();
			},
			// 关闭二维码弹窗
			close1: function() {
				this.$refs.guipopup1.close();
			},
			//绘制二维码
			show_ewm() {
				let self = this;
				let text = this.ewm_text;
				// console.log(text,'texxxxx');
				this.qrcode = new QRCode(this.qrcodeId, {
					text: text,
					width: uni.upx2px(this.qrcodeSize),
					height: uni.upx2px(this.qrcodeSize),
					colorDark: this.qrcodeColor,
					colorLight: this.qrcodeBgColor,
					correctLevel: QRCode.CorrectLevel.H
				});
			},
			//主页面调用方法，切换卡包类型
			ref_list(card_type) {
				let self = this
				this.card_cut = card_type
				console.log('card_type========>', this.card_cut)
				if (this.card_cut == "0") {
					self.get_all_card()
				}
				if (this.card_cut == "1" || this.card_cut == "2") {
					self.get_all_coupon()
				}
			},
			// 点击查看该张卡需要做什么操作
			card_click(wallet_type_id, card_id, type, money, expiry_time, istype) {
				// console.log('wallet_type_id:', wallet_type_id);
				// console.log('card_id:', card_id);
				// console.log('type:', type);
				// console.log('money:', money);
				// console.log('expiry_time:', expiry_time);
				let self = this
				if (wallet_type_id == 28) {
					uni.navigateTo({
						url: '/pages/card/cake'
					})
				} else {
					self.to_qrcode(card_id, type, expiry_time)
				}
			},
			// 跳转二维码页面
			to_qrcode(card_id, type, expiry_time) {
				let self = this;
				// console.log(type)
				// console.log("过期时间：", expiry_time)

				// 获取用户点击时的时间戳
				// let currentTimestamp = Math.floor(Date.now() / 1000);
				// console.log('当前时间戳：', currentTimestamp);

				// 将到期时间转换为时间戳
				// "2023-11-14 15:48:30"
				// let timestamp = Math.floor(new Date(expiry_time).getTime() / 1000); // 将毫秒转换为秒
				// console.log('过期时间戳：', timestamp);

				// if (expiry_time != null && timestamp < currentTimestamp) {
				// 	uni.showToast({
				// 		title: '卡券已过期',
				// 		duration: 3000,
				// 		icon: 'error'
				// 	});
				// } else {
				if (card_id) {
					console.log('跳转id: ', card_id);
					uni.navigateTo({
						url: 'qrcode?card_id=' + card_id + "&type=" + type
					})
				} else if (card_id == 0) {
					if (!this.user) {
						uni.showToast({
							icon: 'error',
							title: '无登录信息!'
						});
						uni.navigateTo({
							url: '../login/login'
						});
						return;
					}
					console.log(self.user)
					if (self.user.dg_card_uuid) {
						console.log('-1--')
						window.location.href = "http://xln.cmx666.cn/h5?phone=" + self.user.phone + "&name=" +
							self.user.chinaname + "&sfz=" + self.user.wxid + '&uuid=' + self.user.dg_card_uuid +
							"&to=mywallet";
					} else {
						uni.showToast({
							title: '个人数据缺失,请重进此页面',
							icon: "none"
						});
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: '错误,请刷新界面!!'
					});
				}
				// }
			},
			// 排序
			sort_asc(data) {
				this.cards = data.sort((a, b) => a.wallet_type.orderby - b.wallet_type.orderby)
				this.cards.push()
			},
			// 获取卡包请求方法
			get_all_card() {
				let self = this;
				console.log("get_all_card");
				self.loading = true;
				this.$boya.NPost("/app/card_bag/get_all", {
					type: this.card_cut
				}, function(res) {
					console.log("卡包res：", res);
					if (res.data.length == 0) {
						self.isEmpty = true
					} else {
						self.isEmpty = false
					}
					if (res.code == 200) {
						self.cards = []
						if (res.data.wallet) {
							let card = res.data.wallet
							card = card.filter(card => !(card.wallet_type.name == '2025年工会会员春节慰问自提券' && card
								.money == '0.00'));
							card = card.filter(card => !(card.wallet_type.name == '2025年工会会员五一节日慰问自提券' && card
								.money == '0.00'));
							for (var i = 0; i < card.length; i++) {
								let idx = i
								if (card[i].wallet_type.category != "选择券") {
									self.cards.push(card[i])
								}
							}
							// self.cards = card;
							self.loading = false;
							self.sort_asc(self.cards)
							uni.setStorageSync("cards", card)
							console.log("卡包数据：", self.cards);
						} else {
							self.hint = '暂无数据'
						}
					} else {
						uni.showToast({
							icon: 'error',
							title: res.data
						});
					}
				}, function(err) {
					console.log('获取卡包数据err: ', err);
					self.text = err.msg
				});
			},

			//优惠券，过期券获取方法
			get_all_coupon() {
				let self = this;
				console.log('-1---')
				this.$boya.NPost("/app/card_bag/get_all_coupon", {
					user_id: self.user.id,
					type: self.card_cut,
					idNo: self.user.idNo
				}, function(res) {
					if (res.data.length == 0) {
						self.isEmpty = true
					} else {
						self.isEmpty = false
					}
					switch (self.card_cut) {
						case "1":
							self.products2 = res.data;
							break;
						case "2":
							self.jf_shop = res.data;
							break;
					}
					console.log('优惠券: ', res.data);
				});
			},

			//无背景图，匹配背景图
			get_back(index, item) {
				if (item.hasOwnProperty('coupon')) {
					if (item.coupon && item.coupon.img) {
						return "url(" + item.coupon.img + ")";
					}
				}
				index = index % 3;
				//没有背景图下方随机背景
				if (index == 1) {
					return 'url(http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-05/09/cheng.jpg)';
				} else if (index == 2) {
					return 'url(http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-05/09/lan.jpg)';
				} else {
					return 'url(http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-05/09/zi.jpg)';
				}
			},
		}
	}
</script>

<style>
	.gui-empty-icon {
		font-size: 130rpx;
		line-height: 130rpx;
	}

	/* 优惠券卡片样式 */
	.card-wrapper {
		position: relative;
		width: 100%;
		/* 卡片宽度 */
		height: 150px;
		/* 卡片高度 */
	}

	.card1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.card-front {
		background-color: #fff;
		z-index: 2;
		/* 前面的卡片在上层 */
	}

	.card-back {
		background-color: #f1f1f1;
		z-index: 1;
		/* 后面的卡片在下层 */
		transform: translateY(80rpx);
		/* 后面的卡片向下偏移一定距离 */
	}

	.card-botton {
		position: absolute;
		bottom: 0;
	}

	/* ---end--- */

	.card {
		background-color: #fff;
		border-radius: 5rpx;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		/* padding: 5rpx; */
		padding-left: 20rpx;
		margin: 0 20rpx 40rpx 20rpx;
		margin-top: 40rpx;
	}

	.gui-card-view {
		background-size: 100% 100% !important;
	}

	.gui-card-body {
		padding-bottom: 25rpx;
	}

	.gui-card-img {
		width: 108rpx;
		height: 98rpx;
		border-radius: 50%;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 50rpx;
		color: #333333;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
		color: #888888;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.button {
		width: 40%;
		margin: 5%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		color: #fff;
	}

	.gui-card-item {
		margin-right: 20rpx;
	}

	.good_content {
		border: #acacac solid 1rpx;
		font-size: 24rpx;
		color: #a3a3a3;
		padding: 20rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.good_content_v {
		margin: 30rpx 0;
	}

	.modal-btns {
		line-height: 88rpx;
		font-size: 26rpx;
		text-align: center;
		width: 200rpx;
	}

	/* .demo{width:690rpx; line-height:60rpx; font-size:22rpx; text-align:center; background-color:#008AFF; color:#FFFFFF; border-radius:50rpx;} */
	.demo {
		display: block;
		width: 488rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		text-align: center;
		margin: auto;
	}

	.demo-msg {
		white-space: nowrap;
		line-height: 50rpx;
		font-size: 25rpx;
	}

	.btn_cp {
		border-radius: 10rpx;
		background-color: #008AFF;
		color: #ffffff;
		line-height: 50rpx;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.gui-card-view {
		background-size: 100% 100%;
	}

	.gui-card-body {
		padding-bottom: 25rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 50rpx;
		color: #333333;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
		color: #888888;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.button {
		width: 40%;
		margin: 5%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		color: #fff;
	}

	.gui-card-item {
		margin-right: 20rpx;
	}

	.good_content {
		border: #acacac solid 1rpx;
		font-size: 24rpx;
		color: #a3a3a3;
		padding: 20rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.good_content_v {
		margin: 30rpx 0;
	}

	.modal-btns {
		line-height: 88rpx;
		font-size: 26rpx;
		text-align: center;
		width: 200rpx;
	}

	.toubu {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #F1F1F1;
		justify-content: space-evenly;
		margin-top: -20rpx;
		margin-left: -25rpx;
		padding: 20rpx 25rpx;
	}

	.shenbao>view {
		position: relative;
		z-index: 1;
		text-align: center;
		height: 62rpx;
		line-height: 62rpx;
		padding: 5rpx 124rpx 10rpx 124rpx;
		font-size: 34rpx;
		/* font-weight: bold; */
	}

	.this_bg {
		background-color: #F1F1F1;
		/* box-shadow: 6rpx 8rpx 10rpx #ccc; */
		/* border: 1px solid #D9ECFF; */
		/* border-radius: 30rpx; */
		/* border-top-right-radius: 30rpx; */
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
	}

	.defu_bg {
		background-color: white;
		/* border: 1px solid #D9ECFF; */
		border-bottom-left-radius: 35rpx;
		border-bottom-right-radius: 35rpx;
	}
</style>